<template>
    <div class="wrapper">
        <nav-bar class="cart">
            <div slot="center">购物车({{cartLength}})</div>
        </nav-bar>
        <scroll class="content" ref="scroll">
            <cart-list></cart-list>
        </scroll>
        <cart-botton-bar @saveClick="barClick" class="cartbobar"></cart-botton-bar>
        <toast :message="messageList" :is-show="isshowList" :img-show="imgShowList"></toast>
    </div>
</template>

<script>
    import CartList from './childCart/CartList'
    import CartBottonBar from './childCart/CartBottonBar'
    import Toast from "../../components/common/toast/toast"
    import NavBar from '../../components/common/navbar/NavBar'
    import Scroll from '../../components/common/scroll/Scroll'
    //引入mapGetters方法
    import {mapGetters} from 'vuex'

    export default {
        name: 'Cart',
        data() {
            return {
                messageList: '购买物品请扫描下方二维码',
                imgShowList: false,
                isshowList: false
            }
        },
        components: {
            NavBar,
            CartList,
            CartBottonBar,
            Scroll,
            Toast
        },
        computed: {
            //mapgetters  vuex自带的方法，可以将getter里面想要的方法渲染进computed中
            //增强属性的复用性
            ...mapGetters([
                'cartLength'
            ])
        },
        activated() {
            //进入购物车重新刷新可滚动区域
            this.$refs.scroll.scroll.refresh()

        },
        methods: {
            barClick() {


                this.isshowList = true
                this.imgShowList = true

                setTimeout(() => {
                    this.isshowList = false
                    this.imgShowList = false
                }, 5000)
            }
        }

    }
</script>

<style scoped>
    .wrapper {
        height: 100vh;
    }

    .cart {
        color: lightskyblue;
        background-color: var(--color-high-text);
        font-weight: 500;
    }

    .content {
        height: calc(100% - 44px - 49px);
        overflow: hidden;
        position: fixed;
    }
</style>